<template>
  <div id="main">
    <div
      style="box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;border-radius:6px;padding:20px"
    >
      <div class="flexBox1">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item><a href="/">档案管理</a></el-breadcrumb-item>
        </el-breadcrumb>
        <div>
          <el-radio-group v-model="radio" size="mini" @change="changeState">
            <el-radio-button label="在职" ></el-radio-button>
            <el-radio-button label="注销" ></el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <el-divider
        style="background-color:rgba(0,0,0,0) !important"
      ></el-divider>
      <div style="display:flex;justify-content:left">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="检索输入：">
            <el-input
              v-model="formInline.name"
              size="small"
              placeholder="请输入姓名、ID或档案号"
              style="margin-right: 10px; width: 200px"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="人员性质：">
            <el-select
              v-model="formInline.ryxz"
              size="small"
              placeholder="人员性质"
              style="margin-right: 10px; width: 180px"
              :clearable="true"
            >
              <el-option v-for="item in ryxzList" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="科室：">
            <el-select
              v-model="formInline.dept"
              placeholder="请选择科室"
              style="margin-right: 10px; width: 180px"
              :clearable="true"
              size="small"
            >
              <el-option v-for="item in deptList" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="档案状态：">
            <el-select
              v-model="formInline.state"
              size="small"
              placeholder="选择状态"
              :clearable="true"
              :disabled="this.radio=='注销'"
              style="margin-right: 10px; width: 180px"
            >
              <el-option v-for="item in stateList" :label="item.label" :value="item.val"></el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="人事状态：" v-if="radio=='注销'">
            <el-select
              v-model="formOutgoing"
              size="small"
              placeholder="选择状态"
              :clearable="true"
              style="margin-right: 10px; width: 180px"
            >
              <el-option v-for="item in outGoinglist" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="onSubmit"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div
      style="
    box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;
    border-radius:6px;padding:10px;
    margin-top:10px;"
      class="flexBox1"
    >
      <div>
        已选择<span> {{ selection.length }} </span>项
      </div>
      <div style="display: flex">
<!--        <input type="file" @change="fnUpload" id="updateInput"></input>-->
        <a href="http://47.106.96.172/file/档案模板.xlsx" style="text-decoration: none" class="el-button  el-button--mini">下载模板</a>
        <el-button type="primary" size="mini" @click="add">新增</el-button>
        <el-button type="primary" size="mini" @click="submitExamine">提交审核</el-button>
        <el-dropdown  type="primary" @command="handleFile" style="margin:0 10px">
          <el-button type="primary" size="mini">
            档案操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="archive"><el-button size="mini" style="width: 80px">归档</el-button></el-dropdown-item>
            <el-dropdown-item command="withdraw"><el-button size="mini" style="width: 80px">撤回</el-button></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-upload style="margin-right: 10px" :show-file-list="false" action="#" :before-upload="handleBeforeUpload">
          <el-button type="primary" size="mini" @click="">导入数据</el-button>
        </el-upload>
        <el-button type="primary" size="mini" @click="exportFile('print')">导出数据</el-button>
      </div>
    </div>

    <div class="table">
    <el-table
      class="elTable"
      :default-sort="{ prop: 'date', order: 'descending' }"
      :data="tableData"
      ref="tableData"
      border
      max-height="800px"
      stripe
      :row-style="{ height: '10px' }"
      style="font-size: 12px;width: 100%;margin-top:30px"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: 'rgb(242, 246, 252)' }"
      v-loading="showTable"
    >
      <el-table-column
        align="center"
        width="40"
        fixed="left"
        type="selection"
      >
      </el-table-column>
      <el-table-column
        sortable
        fixed="left"
        prop="档案编号"
        label="档案号"
        width="120"
      ></el-table-column>
      <el-table-column
        sortable
        align="center"
        fixed="left"
        prop="姓名"
        label="姓名"
        width="100"
      ></el-table-column>
      <el-table-column width="100" sortable fixed="left" label="工号" align="center">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.工号 }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column sortable prop="工龄" label="工龄" align="center"></el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="院龄"
        label="院龄"
      ></el-table-column>
      <el-table-column width="100" label="档案状态" align="center">
        <template slot-scope="scope">
            <span v-if="scope.row.state == null">已归档</span>
            <span v-if="scope.row.state == 1">待归档</span>
            <span v-if="scope.row.state == 2">编辑中</span>
            <span v-if="scope.row.state == 3">待审核</span>
            <span v-if="scope.row.state == 4">已注销</span>
            <span v-if="scope.row.state == 5">查看中</span>
        </template>
      </el-table-column>
      <el-table-column width="100" sortable prop="ryxz" label="人员性质" align="center">
      </el-table-column>
      <el-table-column
        width="100"
        sortable
        align="center"
        prop="outgoing"
        label="人事状态">
        <template slot-scope="scope">
            <span v-if="scope.row.outgoing == null">在职</span>
            <span v-if="scope.row.outgoing == 1">辞职</span>
            <span v-if="scope.row.outgoing == 2">离职</span>
            <span v-if="scope.row.outgoing == 3">辞退</span>
            <span v-if="scope.row.outgoing == 4">开除</span>
            <span v-if="scope.row.outgoing == 5">退休</span>
        </template>
      </el-table-column>
      <el-table-column width="220" prop="科室" label="科室" align="center">
      </el-table-column>
      <el-table-column width="200" sortable prop="证件号码" label="证件号码" align="center">
      </el-table-column>
      <el-table-column width="256 " fixed="right" prop="control" label="操作" align="center">
        <template slot-scope="scope">
          <span title="查看">
            <el-button
            size="mini"
            icon="el-icon-s-help"
            @click="handleShow(scope.$index, scope.row)">
            </el-button>
          </span>
          <span title="编辑">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              :disabled="scope.row.state==3||scope.row.state==null||radio=='注销'"
              @click="handleEdit(scope.$index, scope.row)"
            >
            </el-button>
          </span>
          <span title="下载档案" v-if="scope.row.state == null">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-download"
              :disabled="scope.row.state != null"
              @click="exportFile('printPerson',scope.$index)"
            >
            </el-button>
          </span>
          <span title="审核" v-else>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-s-check"
              :disabled="scope.row.state!=3"
              @click="handleExamine(scope.$index, scope.row)"
              >
            </el-button>
          </span>
           <span title="激活" v-if="scope.row.state==4">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-refresh-left"
              @click="handleRecall(scope.$index, scope.row)"
              >
            </el-button>
          </span>
          <span title="注销" v-else>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete-solid"
              :disabled="scope.row.state==4"
              @click="handleDelete(scope.$index, scope.row)"
              >
            </el-button>
          </span>
          <span title="历史记录">
            <el-button
              size="mini"
              type="info"
              icon="el-icon-data-analysis"
              @click="handleHistory(scope.$index, scope.row)"
              >
            </el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <div id="print" style="display: none">
      <table border cellpadding="0" cellspacing="0">
        <tr>
          <td>姓名</td>
          <td>工号</td>
          <td v-for="m in setTh">{{ m.name }}</td>
        </tr>
        <tr v-for="(n, i) in tableData">
          <td>
            <span>{{ n["姓名"] }}</span>
          </td>
          <td>
            <span>{{ n["工号"] }}</span>
          </td>
          <td v-for="m in setTh">
            <!--
              <span v-if="n[m.value]&&n[m.value].toString().split('-').length==2">{{n[m.value]+'-01'}}</span>
            -->
            <span>&nbsp;{{ m.name==='人员性质'?n['ryxz']:n[m.name] }}</span>
          </td>
        </tr>
      </table>
    </div>
    <div id="printPerson" style="display: none;" :key="exportFileIndex">
      <table border cellpadding="0" cellspacing="0" style="width: 600px">
          <tr>
            <th colspan="6">基本信息</th>
          </tr>
        <tr>
          <td :colspan="6">
            <img src="http://47.106.96.172/userHead/623ed4936286f.png" style="width: 100px">
          </td>
        </tr>
          <tr>
            <th colspan="1">姓名</th>
            <td colspan="1">{{ tableData[exportFileIndex].姓名 }}</td>
            <th colspan="1">性别</th>
            <td colspan="1">{{ tableData[exportFileIndex].性别 }}</td>
            <th colspan="1">名族</th>
            <td colspan="1">{{ tableData[exportFileIndex].民族 }}</td>
          </tr>
          <tr>
            <th colspan="1">证件类型</th><td colspan="1">{{ tableData[exportFileIndex].证件类型 }}</td>
            <th colspan="1">证件号码</th><td colspan="1">{{ tableData[exportFileIndex].证件号码 }}</td>
            <th colspan="1">出生日期</th><td colspan="1">{{ tableData[exportFileIndex].出生日期 }}</td>
          </tr>
        <tr>
          <th colspan="1">籍贯</th> <td colspan="1">{{ tableData[exportFileIndex].籍贯 }}</td>
          <th colspan="1">国籍</th> <td colspan="1">{{ tableData[exportFileIndex].国籍 }}</td>
          <th colspan="1">学历</th>  <td colspan="1">{{ tableData[exportFileIndex].学历 }}</td>
        </tr>
        <tr>
          <th colspan="1">学位</th><td colspan="1">{{ tableData[exportFileIndex].学位 }}</td>
          <th colspan="1">最高学历获取时间</th> <td colspan="1">{{ tableData[exportFileIndex].最高学历获取时间 }}</td>
          <th colspan="1">毕业院校</th><td colspan="1">{{ tableData[exportFileIndex].毕业院校 }}</td>
        </tr>
        <tr>
          <th colspan="1">教育形式</th> <td colspan="1"><pre>{{ tableData[exportFileIndex].教育形式?tableData[exportFileIndex].教育形式:"" }}</pre></td>
          <th colspan="1">婚姻状况</th> <td colspan="1">{{ tableData[exportFileIndex].婚姻状况 }}</td>
          <th colspan="1">政治面貌</th> <td colspan="1">{{ tableData[exportFileIndex].政治面貌 }}</td>
        </tr>
        <tr>
          <th colspan="6">职业信息</th>
        </tr>
        <tr>
          <th colspan="1">科室</th>  <td colspan="1">{{ tableData[exportFileIndex].科室 }}</td>
          <th colspan="1">人员性质</th> <td colspan="1">{{ tableData[exportFileIndex].人员性质 }}</td>
          <th colspan="1">人员类别</th> <td colspan="1">{{ tableData[exportFileIndex].人员类别 }}</td>
        </tr>

        <tr>
          <th colspan="1">聘任职称</th><td colspan="1">{{ tableData[exportFileIndex].聘任职称 }}</td>
          <th colspan="1">人员层级</th> <td colspan="1">{{ tableData[exportFileIndex].人员层级 }}</td>
          <th colspan="1">岗位类别</th> <td colspan="1">{{ tableData[exportFileIndex].岗位类别 }}</td>
        </tr>
        <tr>
          <th colspan="1">管理职务</th> <td colspan="1">{{ tableData[exportFileIndex].管理职务 }}</td>
          <th colspan="1">从事专业</th>  <td colspan="1">{{ tableData[exportFileIndex].从事专业 }}</td>
          <th colspan="1">岗位性质</th><td colspan="1">{{ tableData[exportFileIndex].岗位性质 }}</td>
        </tr>
        <tr>
          <th colspan="1">职业证书编号</th> <td colspan="1">{{ tableData[exportFileIndex].职业证书编号 }}</td>
          <th colspan="1">专科护士证书获取时间</th>  <td colspan="1">{{ tableData[exportFileIndex].专科护士证书获取时间 }}</td>
          <th colspan="1">执业证书有效期</th><td colspan="1">{{ tableData[exportFileIndex].执业证书有效期 }}</td>
        </tr>
        <tr>
          <th colspan="1">参加工作日期</th> <td colspan="1">{{ tableData[exportFileIndex].参加工作日期 }}</td>
          <th colspan="1">来院日期</th><td colspan="1">{{ tableData[exportFileIndex].来院日期 }}</td>
          <th colspan="1">人事状态</th> <td colspan="1">{{ tableData[exportFileIndex].人事状态 }}</td>
        </tr>
        <tr>
          <th colspan="1">返聘日期</th> <td colspan="1">{{ tableData[exportFileIndex].返聘日期 }}</td>
          <th colspan="1">工龄</th>  <td colspan="1">{{ tableData[exportFileIndex].工龄 }}</td>
          <th colspan="1">院龄</th> <td colspan="1">{{ tableData[exportFileIndex].院龄 }}</td>
        </tr>
        <tr>
          <th colspan="1">当前职称晋升日期</th><td colspan="1">{{ tableData[exportFileIndex].当前职称晋升日期 }}</td>
          <th colspan="1">当前职务晋升日期</th><td colspan="1">{{ tableData[exportFileIndex].当前职务晋升日期 }}</td>
          <th colspan="1">当前层级晋升日期</th>  <td colspan="1">{{ tableData[exportFileIndex].当前层级晋升日期 }}</td>
        </tr>
        <tr>
          <th colspan="6">联系信息</th>
        </tr>
        <tr>
          <th colspan="1">手机号码</th> <td colspan="1">{{ tableData[exportFileIndex].当前职称晋升日期 }}</td>
          <th colspan="1">联系人单位</th> <td colspan="1">{{ tableData[exportFileIndex].当前职务晋升日期 }}</td>
          <th colspan="1">联系人地址</th> <td colspan="1">{{ tableData[exportFileIndex].当前层级晋升日期 }}</td>
        </tr>
        <tr>
          <th colspan="1">办公电话</th><td colspan="1">{{ tableData[exportFileIndex].当前职称晋升日期 }}</td>
          <th colspan="1">邮编</th><td colspan="1">{{ tableData[exportFileIndex].当前职务晋升日期 }}</td>
          <th colspan="1">邮箱</th><td colspan="1">{{ tableData[exportFileIndex].当前层级晋升日期 }}</td>
        </tr>
        <tr>
          <th colspan="6">个人简介</th>
        </tr>
        <tr>
          <th colspan="6">{{ tableData[exportFileIndex].个人简介 }}</th>
        </tr>
        <tr>
          <th colspan="6">备注信息</th>
        </tr>
        <tr>
          <th colspan="6">{{tableData[exportFileIndex].联系信息}}</th>
        </tr>
      </table>
    </div>
    <div class="block" style="float:left">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="offset"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="rowsOfPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog :visible.sync="history" :append-to-body='true' width="30%" title="历史记录">
      <el-empty description="暂无数据" v-if="showEmpty" ></el-empty>
      <div  v-else style="max-height:400px;overflow-y:auto;overflow:hidden">
        <el-timeline class="timeLine" v-loading="showHandle"  >
        <el-timeline-item v-for="item in activities" :timestamp="item.time" placement="top">
          <el-card>
            <h4>{{item.handle}}了档案</h4>
            <h6 v-if="item.tips.length>0" style="margin-top:10px">( {{item.tips}} )</h6>
            <p style="margin-top:10px">{{item.dept}}-{{item.name}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      </div>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogFormVisible" width="460px" label-width="100px" :append-to-body='true' >
      <el-form :model="Delform" ref="delForm" :rules="rules" label-position="right" v-loading="showDelete">
        <el-form-item label="请选择注销原因：" prop="reasonDel" >
          <el-select v-model="Delform.reasonDel" >
            <el-option
              v-for="item in outGoinglist"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间：" prop="time">
            <el-date-picker
            type="date"
            v-model="Delform.time"
            value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="原因：" prop="reason">
            <el-input v-model="Delform.reason" placeholder="请输入原因" style="width:220px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="delCommit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import TaskManager from '../service/TaskManager'
import XLSX from "xlsx";
export default {
  data() {
    return {
      exportFileIndex:0,
      // url:require('../assets/查看.png'),
      row:{},
      // selection:{},
      history:false,
      showDelete:false,
      showTable:true,
      showHandle:false,
      showEmpty:false,
      dialogFormVisible:false,
      total:400,
      offset:1,
      rowsOfPage:20,
      selection: [],
      radio: "在职",
      tableData: [
      ],
      formInline: {
        ryxz: "",
        name: "",
        dept: "",
        state:'',
        outgoing:""
      },
      setTh: [
        //显示的表头数据
        {
          name: "证件号码",
          value: "证件号码"
        },
        {
          name: "档案编号",
          value: "档案编号"
        },
        {
          name: "人员性质",
          value: "ryxz"
        },
        {
          name: "科室",
          value: "科室"
        }
      ],
      stateList:[
        {label:'已归档',val:0},
        {label:'待归档',val:1},
        {label:'编辑中',val:2},
        {label:'待审核',val:3},
        {label:'已注销',val:4},
        {label:'查看中',val:5},
        ],
      Delform:{
        reasonDel:'',
        reason:'',
        time:''
      },
       reasonDel:'',
       rules:{
        reasonDel:[ { required: true, message: '请选择注销原因', trigger: 'change' }],
        time:[ { required: true, message: `请选择时间`, trigger: 'change' }],
        reason:[ { required: true, message: `请输入原因`, trigger: 'blur' }]
      },
      outGoinglist:[
        {id:0,name:'辞职',value:1},
        {id:1,name:'离职',value:2},
        {id:2,name:'辞退',value:3},
        {id:3,name:'开除',value:4},
        {id:4,name:'退休',value:5},
      ],
      formOutgoing:"",
      ryxzList:[],
      deptList:[],
      activities:[]
    };
  },
  methods: {
    handleFile(command){
      if(command=='withdraw'){
        this.file("1");
      }else{
        this.file("null");
      }
    },
    formatJson(filterVal,jsonData) {
      console.log(jsonData,"before")
      return jsonData.map( v => filterVal.map(j=> v[j]))
    },
    handleBeforeUpload(file){
      this.importf(file)
    },
    importf(obj) {//导入
      let wb,rABS=true
      // if(!obj.files) {
      //   return;
      // }
      console.log(obj)
      var f = obj;
      var reader = new FileReader();
      reader.onload = (e) =>{
        var data = e.target.result;
        if(rABS) {
          wb = XLSX.read(btoa(this.fixdata(data)), {//手动转化
            type: 'base64'
          });
        } else {
          wb = XLSX.read(data, {
            type: 'binary'
          });
        }
        this.addUserForm(( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])))
        //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
          //wb.Sheets[Sheet名]获取第一个Sheet的数据
          // console.log(( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) ))
        // document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );
      };
      if(rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    },
    getTime(){
      let date=new Date().toLocaleString().split(' ')[0];
      let time=new Date().toLocaleString().split(' ')[1];
      let Now=date+" "+time;
      return Now;
    },
    addUserForm(form) {
      form.forEach(item=>{
        let id=parseInt(Math.random()*10000)
        item.工号="JYYH"+id
        item.档案编号="JYYHBH"+id
        if(item.姓名&&item.科室){
          TaskManager.addUser({...item}).then((res)=>{
            // console.log(res)
            if(res.data=='success'){
              this.$message({
                message: '人员添加成功',
                type: 'success'
              });

              let _params={
                id:item.工号,
                name:item.姓名,
                dept:item.科室,
                password:item.工号,
                create:this.getTime()
              }
              TaskManager.addLoginUser(_params);
              let params={
                state:0,
                id:item.工号,
                name:window.localStorage.name,
                dept:window.localStorage.dept,
                handle:'成功添加',
                time:this.getTime()
              }
              TaskManager.getHandleHistory(params);
              this.infoLoading=false;
              this.$router.go(-1);
            }else{
              this.$message({
                message: '人员添加失败',
                type: 'error'
              });
              this.infoLoading=false;
            }
          })
        }else{
          this.$message({
            type:'error',
            message:'姓名、科室、人员性质不能为空！请修改后再进行相应操作'
          })
          return 0
        }
      })
    },
    fixdata(data) { //文件流转BinaryString
      var o = "",
        l = 0,
        w = 10240;
      for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
      o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
      return o;
    },
    fnUpload() {
      let resultFile = document.getElementById("updateInput").files[0];
      this.importf(resultFile)
      // let reader = new FileReader();
      // reader.readAsText(resultFile,'UTF-8');
      // reader.onload = function(e){
      //   let data = this.result;
      //   console.log(data);
      // }
    },
    download() {
      // list为要下载的数据，如果不是可以先进行数据处理
      // import('引入Export2Excel路径')
      import("@/vendor/Export2Excel").then( excel => {
        const tHeader = ['名称','大小','速度','状态'];
        const filterVal = ['name','id','value',];
        const content = this.outGoinglist;
        const data = this.formatJson(filterVal,content );
        console.log(data,"after")
        excel.export_json_to_excel(tHeader,data,'下载数据')
      })
    },
    file(state){
      this.showTable=true;
      let params={
        id:"",
        state:state
      }
      for(let item of this.selection){
        if(state=='null'){
          if(item.state!=1) {
            this.$message({
              type: 'error',
              message: '只有待归档的档案才能进行归档！'
            })
            this.showTable = false;
            return;
          }
        }else{
          if(item.state!=null) {
            this.$message({
              type: 'error',
              message: '只有已归档的档案才能进行撤回！'
            })
            this.showTable = false;
            return;
          }
        }
        params.id+=`'${item.工号}',`;
      }
      console.log(params)
      TaskManager.changeState(params)
            .then((res)=>{
              if(res.data=='success'){
                let params = this.formInline;
                params.offset=this.offset;
                params.rowsOfPage=this.rowsOfPage;
                this.loadTable(params);
                this.$message({
                  type:'success',
                  message:`档案${state==null?'归档':'撤回'}成功！`
                })
                this.showTable=false;
              }else{
                this.$message({
                  type:'error',
                  message:`档案${state==null?'归档':'撤回'}失败！`
                })
                this.showTable=false;
              }
            })
      // if(this.selection.state=='1'){
      //     TaskManager.changeState(params)
      //       .then((res)=>{
      //         if(res.data=='success'){
      //           let params = this.formInline;
      //           params.offset=this.offset;
      //           params.rowsOfPage=this.rowsOfPage;
      //           this.loadTable(params);
      //           this.$message({
      //             type:'success',
      //             message:'档案归档成功！'
      //           })
      //           this.showTable=false;
      //         }else{
      //           this.$message({
      //             type:'error',
      //             message:'档案归档失败！'
      //           })
      //           this.showTable=false;
      //         }
      //       })
      // }else{
      //   this.$message({
      //     type:'error',
      //     message:'只有待归档的档案才能进行归档！'
      //   })
      //   this.showTable=false;
      // }
    },
    add(){
      console.log(`H${Math.round(Math.random()*100000)}`)
      // this.$router.push({ name: "info", params: { edit: 4, data:{工号:`admin`}} });
      this.$router.push({ name: "info", params: { edit: 4, data:{工号:`H${Math.round(Math.random()*100000)}`}} });
    },
    handleSelectionChange(val){
      console.log(val)
      // console.log(val[0].工号);
      // this.selection.id+=`'${val[0].工号}',`;
      // this.selection.state+=`'${val[0].state}',`;
      //
      // let {工号:id,state}=val[0];
      // this.selection={id,state};
      // console.log(this.selection);
      this.selection=val;
    },
    base64(s) {
      return window.btoa(unescape(encodeURIComponent(s)));
    },
    // 网络图片转 base64
    getBase64(src, cb) {
      var image = new Image();
      image.src = src + '?v=' + Math.random(); // 处理缓存
      image.crossOrigin = "*"; // 支持跨域图片
      image.onload = function () {
        var base64 = this.getBase64Image(image);
        cb && cb(base64);
      }
    },
    getBase64Image(img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var dataURL = canvas.toDataURL("image/png"); // 可选其他值 image/jpeg
      return dataURL;
    },
    exportFile(id,index) {
      this.exportFileIndex=index
      this.$nextTick(()=>{
        this.downloadFile(id)
      })
      // window.setTimeout(this.downloadFile(id),5000)
    },
    downloadFile(id){
      let uri = "data:application/vnd.ms-excel;base64,";
      let excelBox = document.getElementById(id).innerHTML;
      let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
              xmlns:x="urn:schemas-microsoft-com:office:excel"
              xmlns="http://www.w3.org/TR/REC-html40">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
              <!--[if gte mso 9]>
            <xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
              <x:Name>人事档案列表</x:Name>
                  <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions>
              </x:ExcelWorksheet>
            </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
        </head>
        <body>
        <style>
          th,td {
            width:250px;
            height: 50px;
            text-align: center;
            border: 1px solid #000;
            mso-number-format:\@;
            vnd.ms-excel.numberformat:\@;
          }
          th[colspan='6']{
            background-color: gray;
             mso-number-format:\@;
            vnd.ms-excel.numberformat:\@;
          }
        </style>
        ${excelBox}
        </body>
        </html>`;
      //下载模板+
      // window.location.href = uri + this.base64(template);
      var link = document.createElement("a");
      link.href = uri + this.base64(template);
      if (id=='print'){
        link.download =
          "人事档案列表" + new Date().toLocaleString().substr(0, 10) + ".xls";
      }else{
        link.download =
          this.tableData[this.exportFileIndex].姓名 +"个人档案"+ new Date().toLocaleString().substr(0, 10) + ".xls";
      }
      link.setAttribute("style", "visibility:hidden");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    delCommit(){
      this.$refs["delForm"].validate((valid)=>{
        if(valid){
            this.showDelete=true;
            let params={
              id:`'${this.row.工号}'`,
              state:4,
              outgoing:this.Delform.reasonDel
            }
            switch(this.Delform.reasonDel){
              case 1:
                this.reasonDel='辞职';
                break;
              case 2:
                this.reasonDel='离职';
                break;
              case 3:
                this.reasonDel='辞退';
                break;
              case 4:
                this.reasonDel='开除';
                break;
              case 5:
                this.reasonDel='退休';
                break;
            }
            let _params={
              state:0,
              id:this.row.工号,
              name:window.localStorage.name,
              handle:"注销",
              time:new Date().toLocaleString(),
              dept:window.localStorage.dept,
              tips:"注销原因："+this.reasonDel+"; 注销时间："+this.Delform.time+"; "+this.reasonDel+"原因："+this.Delform.reason
            }
           TaskManager.changeState(params).then((res)=>{
              if(res.data=='success'){
                this.$message({
                  type:'success',
                  message:'注销成功！'
                })
                this.showTable=true;
                this.dialogFormVisible=false;
                this.showDelete=false;
                let params = this.formInline;
                params.offset=this.offset;
                params.rowsOfPage=this.rowsOfPage;
                this.loadTable(params);
              }
            })
            TaskManager.getHandleHistory(_params);
        }
      })
    },
    submitExamine(){
      this.showTable=true;
      let params={
        id:"",
        state:3
      }
      for(let item of this.selection){
        if(item.state!='2'){
            this.$message({
              type:'error',
              message:'只有编辑中的档案才能进行审核！'
            })
            this.showTable=false;
            return;
          }
        params.id+=`'${item.工号}',`;
        }
      TaskManager.changeState(params)
        .then((res)=>{
          if(res.data=='success'){
            let params = this.formInline;
            params.offset=this.offset;
            params.rowsOfPage=this.rowsOfPage;
            this.loadTable(params);
            this.$message({
              type:'success',
              message:'提交审核成功！'
            })
            this.showTable=false;
          }else{
            this.$message({
              type:'error',
              message:'提交审核失败！'
            })
            this.showTable=false;
          }
        })
    },
    onSubmit(){
      this.offset=1;
      let params = this.formInline;
      params.status=this.radio;
      params.offset=this.offset;
      params.rowsOfPage=this.rowsOfPage;
      this.showTable=true;
      if(this.radio=='注销'){
        params.outgoing=this.formOutgoing;
      }
      this.loadTable(params);
    },
    changeState(){
      this.showTable=true;
      this.offset=1;
      console.log(this.radio);
      let params = this.formInline;
      params.offset=this.offset;
      params.rowsOfPage=this.rowsOfPage;
      if(this.radio!='注销'){
        params.outgoing='';
        params.state='';
        this.loadTable(params);
      }else{
        params.state=4;
        params.outgoing="";
        this.loadTable(params);
      }
    },
    formatter(row) {
      return row.address;
    },
    // handleSelectiofnChange(val) {
    //   this.selection = val;
    // },
    handleShow(index,row) {
      console.log(index,row)
      this.$router.push({ name: "info", params: { edit: 1, data: row.工号} });
    },
    handleEdit(index,row) {
      this.$router.push({ name: "info", params: { edit: 2,data: row.工号 } });
    },
    handleExamine(index,row){
       this.$router.push({ name: "info", params: { edit: 3,data: row.工号 } });
    },
    handleGenerate(index,row){
      TaskManager.generateExcel();
    },
    handleHistory(index,row){
      this.history=true;
      this.showHandle=true;
      this.showEmpty=false;
      TaskManager.getHandleHistory({id:row.工号,state:1}).then((res)=>{
        this.activities=res.data;
        if(res.data.length=='0'){
          this.showEmpty=true;
        }
        this.showHandle=false;
      })
    },
    handleDelete(index,row){
      this.dialogFormVisible=true;
      this.row=row;
    },
    handleRecall(index,row){
      this.row=row;
      this.$prompt('请输入激活原因', '提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
         let params={
              id:`'${this.row.工号}'`,
              state:1,
              outgoing:'null'
            }
            let _params={
              state:0,
              id:this.row.工号,
              name:window.localStorage.name,
              handle:"激活",
              time:new Date().toLocaleString(),
              dept:window.localStorage.dept,
              tips:"激活原因："+value
            }
           TaskManager.changeState(params).then((res)=>{
              if(res.data=='success'){
                this.$message({
                  type:'success',
                  message:'激活成功！'
                })
                this.showTable=true;
                this.dialogFormVisible=false;
                this.showDelete=false;
                let params = this.formInline;
                params.offset=this.offset;
                params.rowsOfPage=this.rowsOfPage;
                this.loadTable(params);
              }
            })
            TaskManager.getHandleHistory(_params);
        });
    },
    handleSizeChange(val){
      console.log(val)
      this.showTable=true;
      this.rowsOfPage=val;
      let params = this.formInline;
      params.offset=this.offset;
      params.rowsOfPage=this.rowsOfPage;
      this.loadTable(params);
    },
    handleCurrentChange(val){
      this.offset=val;
      this.showTable=true;
      let params = this.formInline;
      params.offset=this.offset;
      params.rowsOfPage=this.rowsOfPage;
      this.loadTable(params);
    },
    loadTable(params){
      TaskManager.getList(params)
        .then(res => {
          this.tableData = res.data.data;
          console.log(this.tableData,"tableData")
          this.total=res.data.count;
          this.showTable=false;
        });
    },
      unEmpty(arr){
        for(let key in arr){
          if(arr[key][0]==''){
            arr.splice(key,1);
          }
        }
      },
      getDeptList(){
        // let params={
        //   name:'科室',
        //   ryxz:'',
        // }
        // TaskManager.getOption(params)
        // .then((res)=>{
        //   console.log(res.data);
        //   this.unEmpty(res.data);
        //   this.deptList=res.data;
        // })
        TaskManager.getDictionary({temp:'dept'}).then((res)=>{
          this.deptList=res.data
        })
      },
      getRyxzList(){
        // let params={
        //   name:'ryxz',
        //   ryxz:'',
        // }
        // TaskManager.getOption(params)
        // .then((res)=>{
        //   console.log(res.data);
        //    this.unEmpty(res.data);
        //   this.ryxzList=res.data;
        // })
        TaskManager.getDictionary({temp:'ryxz'}).then((res)=>{
          this.ryxzList=res.data
        })
      },
  },
  mounted() {
    this.$nextTick(() => {
      let params = this.formInline;
      params.offset=this.offset;
      params.status=this.radio;
      params.rowsOfPage=this.rowsOfPage;
      this.loadTable(params);
      this.getDeptList();
      this.getRyxzList();
    });
  },
  updated() {
    this.$nextTick(() => {
      if(this.$refs.tableData){
        this.$refs.tableData.doLayout();
      }
    });
  }
};
</script>
<style scoped>
.flexBox1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: -14px !important;
  flex-wrap: wrap;
}
.borderBox {
  border: 0.1px solid #eee;
  padding: 10px;
}
.table{
  overflow: hidden;
}
/deep/.timeLine el-timeline{
  padding:20px;
}
/* .el-dialog__body{
  max-height: 450px ;
} */
.timeLine{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
table th[colspan='6']{
  background-color: gray;
}
</style>
